<template>
  <div class="app-container">

    <div class="app-container__section" >
      <PlusSearch
        v-bind="searchBinds"
        :columns="columns"
        v-model="gSearchForm"
      >
      </PlusSearch>
    </div>
    <div class="app-container__section">
      <PlusTable
        v-bind="tableBinds"
        :columns="columns"
      >
        <template #title>
          <table-title />
        </template>
        <template #toolbar>
          <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:role:add']">新增</el-button>
          <el-button type="success" plain icon="Edit" :disabled="gSelection.length !== 1" @click="handleUpdate(gSelection[0])" v-hasPermi="['system:role:edit']">修改</el-button>
          <el-button type="danger" plain icon="Delete" :disabled="gSelection.length === 0" @click="handleDelete(gSelection)" v-hasPermi="['system:role:remove']">删除</el-button>
          <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:role:export']">导出</el-button>
          <ClockTimer :task="gGetList" />
          <SearchAreaControl v-model="gShowSearchForm" />
        </template>

        <template #plus-cell-status="scope">
          <el-switch inactive-color="1" active-value="0"  @click="handleStatusChange(scope.row)"  :model-value="scope.row.status"></el-switch>
        </template>
        <template #plus-cell-action="scope">
          <el-tooltip content="修改" placement="top" v-if="scope.row.roleId !== 1">
            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1">
            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']"></el-button>
          </el-tooltip>
          <el-tooltip content="数据权限" placement="top" v-if="scope.row.roleId !== 1">
            <el-button link type="primary" icon="CircleCheck" @click="handleDataScope(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
          </el-tooltip>
          <el-tooltip content="分配用户" placement="top" v-if="scope.row.roleId !== 1">
            <el-button link type="primary" icon="User" @click="handleAuthUser(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
          </el-tooltip>
        </template>
      </PlusTable>
    </div>
    <!-- 添加或修改角色配置对话框 -->
    <AddForm ref="addFormRef" @refreshList="gGetList" />

    <!-- 分配角色数据权限对话框 -->
    <AuthPerm ref="authPerm" @refreshList="gGetList" />

  </div>
</template>

<script setup >
import {  changeRoleStatus,  } from '@/api/system/role'
import { formatRangeTime } from '@/utils/index.js'
import { useCommonConfig,useColumnsDict} from './hook.js'
import { useDelHook, useListHook } from '@/hooks/crud/index.js'
import { useListConfigHook } from '@/hooks/usePlusConfigHook.js'
import AddForm from './addForm.vue'
import AuthPerm from "./authPerm.vue"
defineOptions({
  name: 'Role'
})
const router = useRouter()
const { proxy,apiFn,primaryKey,moduleName,beforeDelFn } = useCommonConfig()
const { dictData, columns, } = useColumnsDict()

// ====================列表逻辑=========================
const gSearchForm = ref({ })
const { gGetList, gAllExposeOption, } = useListHook({
  listApiFn: apiFn.listApiFn,
  gSearchForm,
  beforeRequest: (reqData) => {
    let { createTime, ...rest } = reqData;
    let timeRange = formatRangeTime(createTime,undefined,'YYYY-MM-DD')
    return {
      ...rest,
      params:timeRange
    }
  },
  afterRequest: (resData) => {
    return resData
  }
})
// ====================属性绑定=========================
const { gTableBinds, gSearchBinds, gSelection, gShowSearchForm } = useListConfigHook()
const tableBinds = computed(() => gTableBinds({ ...gAllExposeOption,primaryKey }))
const searchBinds = computed(() => gSearchBinds({ ...gAllExposeOption } ))
// ==================删除逻辑===========================
const { gDelete } = useDelHook({
  delApiFn: apiFn.delApiFn,
  moduleName,
  beforeDelFn: (reqData) => beforeDelFn(reqData),
  afterDelFn: (resData) =>gGetList(),
})
const handleDelete = (data)=>{
  gDelete(data)
}
// ===================新增、修改======================
const addFormRef = ref(null)
// 新增操作
function handleAdd() {
  addFormRef.value.gOpen()
}
// 修改操作
async  function handleUpdate(row) {
  await addFormRef.value.gOpen(row)
}


// =============================

/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    'system/role/export',
    {
      ...gSearchForm.value
    },
    `role_${new Date().getTime()}.xlsx`
  )
}
/** 角色状态修改 */
function handleStatusChange(row) {
  let text = row.status === '0' ? '停用' : '启用'
  proxy.$modal
    .confirm('确认要"' + text + '""' + row.roleName + '"角色吗?')
    .then( ()=>{
      const data =  row.status === '0' ? '1' : '0';
      return  changeRoleStatus(row.roleId, data)
    })
    .then(() => {
      proxy.$modal.msgSuccess(text + '成功')
      row.status = row.status === '0' ? '1' : '0'
    })
}
/** 分配用户 */
function handleAuthUser(row) {
  router.push('/system/role-auth/user/' + row.roleId)
}
/** 分配数据权限操作 */
const authPerm = ref(null)
function handleDataScope(row) {
  authPerm.value.gOpen(row)
}

</script>
